<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>文章编辑</title>
    <link rel="stylesheet" th:href="@{/mdeditor/css/style.css}"/>
    <link rel="stylesheet" th:href="@{/mdeditor/css/editormd.css}"/>
    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/>
</head>
<body>
<div id="layout">
    <header>
        <h1>文章编辑</h1>
    </header>
    <form name="mdEditorForm">
        <div style="float: left">标题:</div>
        <div><input type="text" name="blogTitle" th:value="${article.blogTitle}"></div>
        <div style="float: left">作者:</div>
        <div><input type="text" name="blogPreface" th:value="${article.blogPreface}"></div>
        <div id="test-editormd">
            <textarea style="display:none;" name="blogContent" th:text="${article.blogContent}"></textarea>
        </div>
        <input type="hidden" name="blogId" th:value="${article.blogId}">
    </form>

</div>
<script th:src="@{/mdeditor/js/jquery.min.js}"></script>
<script th:src="@{/mdeditor/js/editormd.min.js}"></script>
<script type="text/javascript">
    var testEditor;

    $(function () {
        testEditor = editormd("test-editormd", {
            width: "90%",
            height: 640,
            syncScrolling: "single",
            path: "/mdeditor/lib/",
            // 表示支持上传图片
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            // 上传图片的请求接口
            imageUploadURL: "/api/blog/image/upload",
            // 工具栏图标的设置，大家可以自定义。比如 publish就是我定义的。
            toolbarIcons: function () {
                return ["undo", "redo", "|", "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|", "h1", "h2", "h3", "h4", "h5", "h6", "|", "list-ul", "list-ol", "hr", "|", "link", "reference-link", "image", "code", "preformatted-text", "code-block", "table", "datetime", "emoji", "html-entities", "pagebreak", "|", "goto-line", "watch", "preview", "fullscreen", "clear", "search", "|", "help", "info", "||", "publish"];
            },
            // 自定义图标后，定义图标对应的文字
            toolbarIconTexts: {
                publish: "<span  style='color: red'>发布</span>"
            },
            // 自定义图标的触发
            toolbarHandlers: {
                publish: function (cm, icon, cursor, selection) {
                    mdEditorForm.method = "post";
                    mdEditorForm.action = "/api/blog/publish";//提交至服务器的路径
                    mdEditorForm.submit();
                }
            }
        });

        /*
        // or
        testEditor = editormd({
            id      : "test-editormd",
            width   : "90%",
            height  : 640,
            path    : "../lib/"
        });
        */
    });
</script>
</body>
</html>
